<template>
  <el-dialog
    :title="批量导入学员界面"
    :close-on-click-modal="false"
    :visible.sync="visible"
    customClass="customWidth">
    <el-upload
      class="upload-demo"
      :before-upload="beforeUploadHandle"
      :action="importUrl"
      :before-remove="beforeRemove"
      :on-success="successHandle"
      multiple
      :limit="1"
      :on-exceed="handleExceed">
      <el-select v-model="shopid" placeholder= "请选择校区" @change="changeUrl()" style="width:250px;height:50px">
        <el-option v-for="item in shopids"
                   :label="item.shopname"
                   :key="item.id"
                   :value="item.id"
        ></el-option>
      </el-select>
	  <el-button size="small" type="primary">选择文件</el-button>
      <el-span style="color: #b94a48;font-size: 25px">该页面只显示一次，请看清楚后慎重关闭！</el-span>
    </el-upload>
    <div style="height: 500px; width:100%; ">
      <el-table
        :data="dataList"
        border
        height="500"
        v-loading="dataListLoading">
        <el-table-column
          prop="studentname"
          header-align="center"
          align="center"
          label="学员姓名">
        </el-table-column>
        <el-table-column
          prop="studentmather"
          header-align="center"
          align="center"
          label="家长姓名">
        </el-table-column>
        <el-table-column
          prop="matherphone"
          header-align="center"
          align="center"
          label="家长电话" width="110">
        </el-table-column>
        <el-table-column
          prop="other"
          header-align="center"
          align="center"
          label="应急联系人">
        </el-table-column>
        <el-table-column
          prop="otherphone"
          header-align="center"
          align="center"
          label="应急电话" width="110">
        </el-table-column>
        <el-table-column
          prop="cardtypeName"
          header-align="center"
          align="center"
          label="会员卡类型" width="150">
        </el-table-column>
        <el-table-column
          prop="residualclasshour"
          header-align="center"
          align="center"
          label="课时">
        </el-table-column>
        <el-table-column
          prop="duetime"
          header-align="center"
          align="center"
          label="到期时间" width="160">
        </el-table-column>
        <el-table-column
          prop="payment"
          header-align="center"
          align="center"
          label="学员缴费">
        </el-table-column>
        <el-table-column
          prop="isSuccess"
          header-align="center"
          align="center"
          label="导入结果">
          <template slot-scope="scope">
            <span v-if="scope.row.isSuccess===1" style="color: #13ce66">成功</span>
            <span v-if="scope.row.isSuccess===0" style="color: #ce1f10">失败</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          header-align="center"
          align="center"
          label="导入结果描述"
          width="500">
        </el-table-column>
      </el-table>
    </div>

  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataList: [],
        shopid: '请选择校区',
        dataListLoading: false,
        shopids: [],
        importUrl: ''
      }
    },
    mounted () {
      this.getShopInfo()
      this.$refs.upload.clearFiles()
    },
    methods: {
      init () {
        this.visible = true
      },
      // 获取分校信息-列表
      getShopInfo () {
        this.$http({
          url: this.$http.adornUrl('/business/student/getShopInfo'),
          mothod: 'get'
        }).then(({data}) => {
          this.shopids = data.list
        })
      },
      changeUrl () {
        this.importUrl = this.$http.adornUrl(`/business/excelImportStudent?token=${this.$cookie.get('token')}` + `&shopId=` + this.shopid)
      },
      // 上传文件及批量导入学生信息功能
      beforeUploadHandle (file) {
        this.dataListLoading = true
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}?`)
      },
      successHandle (file, fileList) {
        this.dataListLoading = false
        console.log(file)
        if (file && file.code === 0) {
          this.dataList = file.rsList
        } else {
          this.$message.error(file.msg)
        }
      }
    }
  }
</script>
<style>
  .customWidth{
    width:80%;
  }
</style>
